<template>
    <div class="bgc">
        <div class="left">
            <div class="title">
                <div>原神</div>
                <div>后台管理系统</div>
            </div>
        </div>
        <!-- 登录部分 -->
        <div class="right">
            <input type="text" placeholder="账号" v-model="user">
            <input type="password" placeholder="密码" v-model="password">
            <div class="login" @click="login">管理员登录</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user:'',
                password:''
            }
        },
        methods:{
            login(){
                if (!this.user || !this.password){
                    alert('账号密码不能为空')
                    return
                }
                const url='user/admin/login'
                const params=`user=${this.user}&password=${this.password}`
                this.axios.post(url, params, {headers:{'Content-type':'application/x-www-form-urlencoded'}})
                    .then(res => {
                        if (res.data.code==200){
                            alert('登录成功')
                            // 登录成功 跳转到首页
                            this.$router.push('/loginsucc')
                            sessionStorage.setItem('uname',res.data.uname)
                        }else {
                            alert('账号或密码错误')
                        }
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
$login-bg:#0AA1ED;
.bgc {
    height: 100%;
    user-select: none;
    display: flex;
    align-items: center;
    .left {
        position: relative;
        background-color: $login-bg;
        width: 65%;
        height: 100%;
        color: #fff;
        font-family: '黑体';
        font-weight: bold;
        font-size: 2em;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        margin-left: -50px;
        .title {
            position: absolute;
            top: 10%;
            left: 10%;
            >div:first-child {
                padding: 10px 0;
            }
        }
    }
    .right {
        width: 400px;
        margin: 0 auto;
        input {
            margin: 30px 0;
            width: 100%;
            border: none;
            outline: none;
            border-bottom: 1px solid #ccc;
            display: block;
            padding: 20px 20px;
            font-size: 1.1em;
        }
        .login {
            text-align: center;
            background-color: $login-bg;
            color: #fff;
            padding: 10px 0;
            border-radius: 50px;
            cursor: pointer;
            &:active {
                background-color: darken($login-bg,10%);
            }
        }
    }
}
</style>